<template>
    <div class="container">
        <div class="main">
            <div class="head">支付中心</div>
            <div v-show="!toPay" class="content">
                <div class="title">订单信息</div>
                <div class="product-c">
                    <div class="box">
                        <div class="con">
                            <div class="item">
                                <div>产品名称</div>
                                <div>{{ poductDetail.productName || '' }}</div>
                            </div>
                            <div class="item">
                                <div>原价</div>
                                <div class="price">￥{{ poductDetail.actPrice | totalMoney }}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="title">账号确认</div>
                <div class="count-c">
                    <div class="item">
                        <span>请输入手机号</span>
                        <input v-model="form.phone" type="text">
                    </div>
                    <div class="item">
                        <span>请再次输入</span>
                        <input type="text" v-model="form.repPhone" @blur="checkPhone">
                        <div class="err-msg" v-if="showErrMsg">{{errMsg}}</div>
                    </div>
                </div>
                
                <div class="title">支付方式</div>
                <div class="pay-c">
                    <div :class="['item', payType=='ali'?'selected':'']" @click="payType='ali'">
                        <img :src="PIC_URL+'/images/zhi_fu_pc.png'" alt="">
                        <img class="sl" v-if="payType=='ali'" :src="PIC_URL+'/images/xuan_z_pc.png'" alt="">
                    </div>
                    <div :class="['item',payType=='wx'?'selected':'']" @click="payType='wx'">
                        <img :src="PIC_URL+'/images/wei_xin_pc.png'" alt="">
                        <img class="sl" v-if="payType=='wx'" :src="PIC_URL+'/images/xuan_z_pc.png'" alt="">
                    </div>
                </div>
                <div class="link-us">
                    <div class="info">
                        <div>
                            <span>如您支付遇到问题，请致电联系我们</span>
                            <span class="phone">{{componyInfo.service_hotline}}</span>
                        </div>
                        <div >
                            <span>实际支付：</span>
                            <span class="price">￥{{ poductDetail.actPrice | totalMoney }}</span>
                        </div>
                    </div>
                    <div class="pay-bt">
                        <span @click="toBuy">立即支付</span>
                    </div>
                </div>
            </div>
            <div v-show="toPay" class="content code">
                <div class="con">
                    <div class="item title">订单信息</div>
                    <div class="item"><span class="tip">产品名称:</span> <span class="name">{{ poductDetail.productName || '' }}</span></div>
                    <div class="item"><span class="tip">支付价格:</span> <span class="price">￥{{ poductDetail.actPrice | totalMoney }}</span></div>
                    <div class="ifram-c">
                        <iframe v-if="payType=='ali'" class="ifram" :src="payUrl" frameborder="0"></iframe>
                        <div v-if="payType=='wx'" >
                            <img :src="wxCode" alt="">
                        </div>
                    </div>
                    <div class="tip-c" v-if="payType=='wx'">请使用微信扫码完成支付</div>
                    <div class="tip-c" v-if="payType=='ali'">请使用支付宝扫码完成支付</div>
                    <div class="link-us">
                        <span>如您支付遇到问题，请致电联系我们</span>
                        <span class="phone">{{componyInfo.service_hotline}}</span>
                    </div>
                </div>
                
            </div>
        </div>

        
    </div>
</template>

<script>
import qs from 'qs';
import {PRODUCT_URL,TLBY_PC_WB} from '@/common/const'
import {getProductDetail,getPhone,createOrder,alipay,wxPay,getOrderDetail} from '../api'
import {getUrlParams} from '@/common/common';
let {productId} = getUrlParams();
const href = window.document.domain;
if(href.includes('test') || href.includes("localhost") || href.includes("192.168.41")){
    productId = 79;
}else {
    productId = 64;
}
export default {
    name: "Home",
    data() {
        return {
            productId:productId||79, // 测试79，正式64
            showErrMsg: false,
            errMsg: '请输入正确手机号',
            form: {
                phone:'',
                repPhone: ''
            },
            payType:'ali',
            componyInfo:{},
            poductDetail:{},
            payUrl:'',
            toPay: false,
            wxCode: '',
            loading: false
        }
    },
    created(){
        this.getProductDetail();
        this.getPhone();
    },
    filters:{
        totalMoney(num){
            if(num <= 0 || !num){
                return 0;
            }else{
                return num.toFixed(2);
            }
        }
    },
    methods: {
        //产品信息
        getProductDetail() {
            // let productId = this.payFlag.productId || '';
            getProductDetail(this.productId).then(res => {
                this.poductDetail = res.data[0];
            });
        },
        // 获取服务热线
        getPhone(){
            getPhone().then(res=>{
                this.componyInfo = res.data;
            })
        },
        // 校验手机号
        checkPhone(){
            let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
            if (this.form.phone=='' || this.form.repPhone=='') {
                this.showErrMsg = true;
                this.errMsg ='请输入手机号';
            } else if (!reg.test(this.form.phone) || !reg.test(this.form.repPhone)) {
                this.showErrMsg = true;
                this.errMsg ='请输入正确的手机号';
            } else if (this.form.phone !== this.form.repPhone) {
                this.showErrMsg = true;
                this.errMsg ='请输入手机号号码一致';
            } else {
                this.showErrMsg = false;
                this.errMsg ='';
            }
        },
        // 去购买
        toBuy(){
            this.checkPhone();
            if (this.showErrMsg) {
                return false;
            };
            this.createOrder();
        },
        // 生成订单
        createOrder(){
            if(this.loading){
                return
            }
            this.loading = true;
            let params = {
                productId: this.poductDetail.productId,
                systemCode: 'client',
                productActId: this.poductDetail.productActId,
                paySource: 3,
                paymark: 1,
                totalPrice: this.poductDetail.actPrice,
                phone: this.form.phone,
                repPhone: this.form.repPhone,
                isCheckRepPhone: 1,
                type:0,
                channel: '简易支付'
            }
            createOrder(params).then(res=>{
                if(res.status==1){
                    this.confirmBuy(res.data);
                }
                console.log(res)
            }).catch(err=>{
                console.log(err)
                this.$message({
                    type: 'error',
                    message:err ||'"下单失败"'
                });
            })
        },
        // 确认购买
        confirmBuy(data){
            localStorage.setItem('orderNum',data.orderNum);
            let param = {
                orderNum: data.orderNum,
                width:'307',
                height:'314',
                returnUrl: `${TLBY_PC_WB}/webclient/simplePay/index.html?path=/paySuccess`
            }
            this.loading = false;
            if(this.payType=='wx'){
                wxPay(param).then(res=>{
                    this.toPay = true;
                    // 返回文件无法展示
                    let url=`${PRODUCT_URL}/solopay/wxpay/pay/webWxPayNoUser.htm?${qs.stringify(param)}`
                    this.wxCode = url;
                })
            }
            if (this.payType=='ali') {
                alipay(param).then(res=>{
                    console.log(JSON.parse(res))
                    let data = JSON.parse(res)
                    this.payUrl=data.drcodePayUrl;
                    this.toPay = true;
                })
            }
            // 轮询查询订单状态
           this.checkOrderState();
        },
        // 轮询查询订单状态
        checkOrderState(){
            let time = setInterval(()=>{
                // 获取订单信息
                // 只管 1 是已支付 其他不管
                // 0未支付 1已完成 2已取消 3申请退款 4退款成功 5订单关闭 6 服务中 7待确认 8试用期 9试用到期
                let orderNum = localStorage.getItem('orderNum');
                getOrderDetail(orderNum).then(res => {
                    if(res.data.orderState && res.data.orderState == 1) {
                        clearInterval(time);
                        window.location.href = `${TLBY_PC_WB}/webclient/simplePay/index.html?path=/paySuccess`
                    }
                })
            },5000);
        }
    }
}
</script>

<style lang="scss">
html, body {
    background: #F7F8FA;
}
</style>

<style scoped lang="scss">
.container{
   width: 100%;
   border-top:1px solid #fff;
    .main{
        width: 1000px;
        margin: auto;
        background: #fff;
        margin-top: 60px;
        box-sizing: border-box;
        .head{
            color: #fff;
            font-size: 24px;
            padding: 24px 150px;
            box-sizing: border-box;
            background: url($PIC_URL + '/images/tittle_bg.png') no-repeat 100%;
        }
        .content{
            padding: 0 150px;
            .title{
                margin: 32px 0 23px;
                font-size: 18px;
                color: #333333;
                font-family: MicrosoftYaHei;
            }
            .product-c{
                border-bottom: 1px solid #D9DDE1;
                .box{
                    background: #F3F5F7;
                    margin-bottom: 16px;
                    .con{
                        display: flex;
                        justify-content: space-between;
                        padding: 20px;
                        box-sizing: border-box;
                        .item{
                            display: flex;
                            flex-direction: column;
                            color: #333;
                            font-size: 16px;
                            .price{
                                color: #F01414;
                            }
                            div{
                                &:nth-child(1){
                                    margin-bottom: 16px;
                                }
                            }
                            
                            &:nth-child(1){
                                border-right: 1px solid #D9DDE1;
                                flex: 1;
                                div{
                                    text-align: left;
                                }
                            }
                            &:nth-child(2){
                                flex: 1;
                                div{
                                    text-align: right;
                                }
                            }
                        }
                    }
                }
            }
            .count-c{
                padding-bottom: 30px;
                box-sizing: border-box;
                border-bottom: 1px solid #D9DDE1;
                
                .item{
                    display: flex;
                    align-items: center;
                    font-family: MicrosoftYaHei;
                    position: relative;
                    &:nth-child(1){
                        margin-bottom: 16px;
                    }
                    span{
                        width: 136px;
                        text-align: left;
                        color: #2D2D2D;
                        font-size: 16px;
                    }
                    input{
                        border: 1px solid #D9DDE1;
                        border-radius: 8px;
                        width: 297px;
                        height: 40px;
                        line-height: 40px;
                        padding: 0 20px ;
                        &:focus-visible{
                           
                            outline:none;
                        }
                    }
                    .err-msg{
                        position: absolute;
                        left: 136px;
                        top: 47px;
                        color: #F01414;
                        font-size: 14px;
                    }
                }
            }
            .pay-c{
                padding-bottom: 40px;
                box-sizing: border-box;
                border-bottom: 1px solid #D9DDE1;
                margin-bottom: 35px;
                display: flex;
                .item{
                    position: relative;
                    border: 2px solid #fff;
                    border-radius: 9px;
                    &.selected{
                        border: 2px solid #F01414;
                    }
                    &:nth-child(1){
                        margin-right: 40px;
                    }
                    .sl{
                        position: absolute;
                        right: 0;
                        bottom: 0;
                    }
                }
            }
            .link-us{
                color: #333333;
                font-size: 16px;
                .info{
                    display: flex;
                    justify-content: space-between;
                    div{
                        &:nth-child(1){
                            text-align: left;
                        }
                        &:nth-child(2){
                            text-align: right;
                        }
                    }
                }
                .phone{
                    color: #007AFE;
                }
                .price{
                    color: #F01414;
                }
                .pay-bt{
                    text-align: right;
                    margin-top: 20px;
                    padding-bottom: 162px;
                    span{
                        color: #fff;
                        display: inline-block;
                        padding: 13px 42px;
                        border-radius: 2px;
                        cursor: pointer;
                        background: #F01414;
                    }
                    
                }
            }
            &.code {
                .con{
                    color: #333;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    .item {
                        width: 330px;
                        display: inline-block;
                        display: flex;
                        align-items: center;
                        &.title{
                            font-size: 18px;
                            color: #333;
                        }
                        &:nth-child(1){
                            margin-bottom: 29px;
                        }
                        &:nth-child(2){
                            margin-bottom: 23px;
                        }
                        &:nth-child(3){
                            margin-bottom: 39px;
                        }
                        .tip{
                            padding-right: 37px;
                        }
                        .price{
                            color: #F01414;
                            font-size: 24px;
                        }
                        .name{
                            font-size: 24px;
                        }
                    }
                    .ifram-c{
                        .ifram{
                            width: 200px;
                            height: 205px;
                        }
                    }
                    .tip-c{
                        text-align: center;
                        font-size: 18px;
                        margin: 20px 0 30px;
                    }
                    .link-us{
                        text-align: center;
                        font-size: 16px;
                        margin-bottom: 200px;
                        .price{
                            color: #007AFE;
                        }
                    }
                }
            }
        }
    }
}

</style>